<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>添加用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{../../static/css/weadmin.css}">
</head>

<body>
<div class="weadmin-body">
    <form id="form" class="layui-form">

        <input th:value="${user.getId()}" name="id" type="hidden">

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">上传头像</label>
            <div class="layui-form-label">
                <button type="button" class="layui-btn" id="upload-button">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">图片预览</label>
            <div class="layui-input-block">
                <img  th:src="@{(${user.getPictureUrl()})}" id="image" alt="" style="width: 200px;height: 200px;">
            </div>
        </div>


        <div class="layui-form-item">
            <label for="username" class="layui-form-label">
                <span class="we-red">*</span>用户名
            </label>
            <div class="layui-input-inline">
                <input type="text" th:value="*{user.getUsername()}" id="username" name="username" required=""
                       lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_email" class="layui-form-label">
                <span class="we-red">*</span>邮箱
            </label>
            <div class="layui-input-inline">
                <input th:value="${user.getEmail()}" type="text" id="L_email" name="email" required=""
                       lay-verify="email" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="we-red">*</span>唯一的登入名
            </div>
        </div>
        <div class="layui-form-item">
            <label for="phone" class="layui-form-label">
                <span class="we-red">*</span>手机
            </label>
            <div class="layui-input-inline">
                <input th:value="${user.getTelephone()}" type="text" id="phone" name="telephone" required=""
                       lay-verify="phone" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <select name="sex" lay-verify="required">
                    <option name="sex" th:selected="${user.getSex()==1}" value="1">男</option>
                    <option name="sex" th:selected="${user.getSex()==0}" value="0">女</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <select name="status" lay-verify="required">
                    <option name="status" th:selected="${user.getUserStatus()==1}" value="1">启用</option>
                    <option name="status" th:selected="${user.getUserStatus()==0}" value="0">注销</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <select name="role" lay-verify="required">
                    <option th:selected="${user.getRole()==1}" name="role" value="1">管理员</option>
                    <option th:selected="${user.getRole()==2}" name="role" value="2">评委</option>
                    <option th:selected="${user.getRole()==3}" name="role" value="3">参赛选手</option>
                    <option th:selected="${user.getRole()==4}" name="role" value="4">观众</option>
                </select>
            </div>
        </div>
        <br>

        <div class="layui-form-item">
            <button id="btn" class="layui-btn layui-btn-fluid" lay-filter="add" lay-submit="" onclick="doUpdate()">确定
            </button>
        </div>
    </form>
</div>
<script th:src="@{../../static/layui/layui.js}"></script>
<script th:src="@{../../static/mysource/js/jquery-3.3.1.min.js}"></script>

<script type="text/javascript">


    layui.use('upload', function () {
        var upload = layui.upload;
        //获得layui里的jquery
        var $ = layui.$;

        //执行实例
        var uploadInst = upload.render({
            elem: '#upload-button' //绑定元素
            , url: '/upload/image' //上传接口
            , done: function (res) {
                if (res.code == 1) {
                    //成功
                    layer.msg(res.msg);
                    //首先我们要获得我们上传之后的图片的访问路径
                    var imagePath = res.data.src;
                    var i = imagePath.substring(21);
                    console.log(i)
                    $("#image").attr("src", imagePath)
                } else {
                    //失败了
                    layer.msg(res.msg);
                }
            }
            , error: function () {
                //请求异常回调
            }
        });
    });


    function doUpdate() {

        // 使用JQuery发送一个ajax请求
        var name = $("[name='username']").val();
        var imgPath = $("#image")[0].src.substring(21);
        var email = $("[name='email']").val();
        var role = $("[name='role']").val();
        var telephone = $("[name='telephone']").val();
        var id = $("[name='id']").val();
        var sex = $("[name='sex']").val();
        var status = $("#image").val();


        console.log(status)


        $.ajax({
            url: "/user/doupdate",
            dataType: "json",
            type: "post",
            data: {
                "username": name,
                "email": email,
                "role": role,
                "sex": sex,
                "telephone": telephone,
                "id": id,
                "userStatus": status,
                "pictureUrl":imgPath
            },
            success: function (data) {
                if (data.flag) {
                    alert(data.msg);
                    console.log(data)

                    location.reload()
                } else {
                    alert(data.msg);
                    location.reload()
                }

            }
        })

    }


</script>


</body>

</html>